<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <svg width="200" height="200">
        <rect x="10" y="10" rx="50" ry="30" width="100" height="100" style="fill: red;
        stroke-width: 5;
        stroke: rgb(0,0,0);
        stroke-opacity: 0.5;
        opacity: 0.5;
    " />
        <rect x="100" y="100" rx="50" ry="30" width="100" height="100" fill="yellow" stroke-width="2" stroke="red" />
    </svg>
    <svg width="200" height="200">
        <!-- <circle cx="100" cy="100" r="40" fill="yellow" stroke-width="2" stroke="red" stroke-opacity="0.5"
            opacity="0.5" /> -->
        <ellipse cx="100" cy="100" rx="50" ry="90" fill="yellow" stroke-width="2" stroke="red" stroke-opacity="0.5"
            opacity="0.5" />
    </svg>
    <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">

        <path d="M110  | 100 10" />

        <!-- Points -->
        <circle cx="10" cy="10" r="12" fill="red" />

    </svg>
</body>

</html>